<template>
  <div class="popup_search">
    <van-popup v-model="screenList.showSearch" class="screen_box" position="right" :style="{ height: '85%' }">
      <div class="screen_title_box">
        <span class="screen_title">筛选</span>
      </div>
      <ul class="screen_lisvaluet">
        <li v-for="(item, index) in screenList.data" :key="index">
          <van-cell v-model="screenData[item.key]" @click="clickScreenItem(item, index)" is-link >
            <template slot="title">
              <span class="custom-title">{{item.label}}</span>
            </template>
          </van-cell>
        </li>
      </ul>

      <div class="screen_btn_box">
        <van-button @click="btnReset" square color="#F4F4F4">重置</van-button>
        <van-button @click="btnSearch" square color="#E4E4E4">确定</van-button>
      </div>
    </van-popup>


    <div class="popup_search_checkbox">
      <van-popup v-model="showSearchRight" class="screen_box" position="right" :style="{ height: '85%' }">
        <div class="screen_title_box">
          <i class="icon_return" @click="showSearchRight = false;"></i>
          <span class="screen_title">{{currentRightLabel}}</span>
          <span @click="btnConfirm" class="btn_confirm">确定</span>
        </div>

        <!-- <div class="search_box">
          <i class="icon_search"></i>
          <van-field v-model="seachSalesPerson" placeholder="请输入姓名/工号/校区" clearable />
        </div> -->

        <div class="search_list">
          <van-checkbox-group v-model="checkedList">
            <van-cell-group>
              <van-cell
                v-for="(item, index) in rightAreaList"
                clickable
                :key="index"
                @click="toggle('checkboxes',index)"
              >
                <span class="student_info">{{item.label}}</span>
                <van-checkbox
                  :name="item"
                  ref="checkboxes"
                  slot="right-icon"
                />
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>
        </div>
      </van-popup>
    </div>

    <div class="popup_search_radio">
      <van-popup v-model="showSearchBottom" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
          v-if="bottomAreaType == 'date'"
          :type="screenList.dateType"
          title="请选择"
          :formatter="formatter"
          :min-date="screenList.minDate"
          @cancel="onCancel"
          @confirm="onConfirm"
        />

        <van-picker 
          v-else-if="bottomAreaType == 'timeSection'" 
          :columns="columns" 
          @change="onChange"
          @cancel="onCancel"
          @confirm="onConfirm"
          show-toolbar
          title="请选择"
        />

        <van-picker
          v-else
          show-toolbar
          title="请选择"
          value-key="label"
          :columns="bottomAreaList"
          @cancel="onCancel"
          @confirm="onConfirm"
        />

        
      </van-popup>
    </div>
  </div>
</template>

<style scoped>
  
</style>

<script>
let timeSlot = [
  [],[]
]

for(let i=1; i<= 30; i++) {
  timeSlot[0].push(i);
  timeSlot[1].push(i);
}


export default {
  data() {
    return {
      activeItemKey: '',
      activeItemList: [],

      showSearchBottom: false,
      bottomAreaType: '',
      bottomAreaList: [],

      showSearchRight: false,
      currentRightLabel: '',
      rightAreaList: [],

      salesPersonRadio: '',
      checkedList: [],

      columns: [
        {
          values: timeSlot[0],
          className: 'column1'
        },
        {
          values: timeSlot[1],
          className: 'column2',
          defaultIndex: 2
        }
      ]

    }
  },

  created() {

  },

  methods: {
    btnReset() {
      console.log(this.screenData);
      for(let i in this.screenData) {
        this.screenData[i] = '';
      }
      this.$forceUpdate();
      this.$emit('reset');
    },
    btnSearch() {
      this.$emit('searchData', this.screenData);
    },

    clickScreenItem(item, index) {
      console.log(item);
      this.currentRightLabel = item.label;
      this.activeItemKey = item.key;
      this.activeItemList = item.options;

      if(item.verfiKey && this.screenData[item.verfiKey] == '') {
        this.$toast.fail(item.tips);
        return false;
      }
      
      this.bottomAreaType = item.bottomType

      if(item.checkType == "radio") {
        this.showSearchBottom = true;
        this.bottomAreaList = item.options;
        
      }else if(item.checkType == 'date'){
        this.showSearchBottom = true;

      }else{    // right
        this.rightAreaList = item.options;
        this.showSearchRight = true;
      }


    },

    btnConfirm() {
      console.log(this.checkedList);
      this.showSearchRight = false;

      let str = [];
      let strId = [];
      this.checkedList.forEach(item => {
        str.push(item.label);
        strId.push(item.id);
      })


      this.screenData[this.activeItemKey] = str.join(',')
      this.screenData[this.activeItemKey + 'Id'] = strId.join(',')

      
      if(this.activeItemKey == 'school') {
        console.log(this.screenData)
        this.$emit('schoolChange', this.screenData);
      }
      
      this.checkedList = [];
    },


    onConfirm(value, index) {
      console.log(`当前值：${value.id || value}, 当前索引：${index}`)
      
      if(this.bottomAreaType == 'date') {
        this.screenData[this.activeItemKey] = this.formatDate(value)
      }else if(this.bottomAreaType !== 'timeSection'){
        this.screenData[this.activeItemKey] = this.activeItemList[index].label
        if(value.id !== '') {
          this.screenData[this.activeItemKey + 'Id'] = value.id
        }
        // 全部传空
        if(value.label.indexOf('全部') >= 0) {
          this.screenData[this.activeItemKey + 'Id'] = ''
        }
      }else{
        if(value[0] == value[1]) {
          this.screenData[this.activeItemKey] = `${value[0]}`
        }else{
          this.screenData[this.activeItemKey] = `${value[0]}-${value[1]}`
        }
      }

      if(this.activeItemKey == 'school') {
        console.log(this.screenData)
        this.$emit('schoolChange', this.screenData);
      }

      
      

      
      this.showSearchBottom = false;

      console.log(this.screenData);
    },
    onCancel() {
      this.showSearchBottom = false;
    },


    toggle(ref, index) {
      this.$refs[ref][index].toggle();
    },

    formatDate(date) {
      let month = (date.getMonth()+1) > 9 ? (date.getMonth()+1) : "0" + (date.getMonth()+1);
      let day = (date.getDate()) > 9 ? (date.getDate()) : "0" + (date.getDate());
      let hours = (date.getHours()) > 9 ? (date.getHours()) : "0" + (date.getHours());
      let minutes = (date.getMinutes()) > 9 ? (date.getMinutes()) : "0" + (date.getMinutes());
      let seconds = (date.getSeconds()) > 9 ? (date.getSeconds()) : "0" + (date.getSeconds());

      if(this.screenList.dateType == 'datetime') {
        var dateString =
          date.getFullYear() + "-" +
          month + "-" +
          day + " " +
          hours + ":" +
          minutes
      }else if (this.screenList.dateType == 'year-month') {
        var dateString =
          date.getFullYear() + "-" +
          month
      }
      else{
        var dateString =
          date.getFullYear() + "-" +
          month + "-" +
          day
      }
      
          
      return dateString;
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`;
      } else if (type === 'month') {
        return `${value}月`
      }else if (type == 'day') {
        return `${value}日`
      }else if (type == 'hour') {
        return `${value}点`
      }else if (type == 'minute') {
        return `${value}分`
      }
      return value;
    },

    onChange(picker, values) {
      if(values[0] > values[1]) {
        picker.setColumnValue(1, values[0]);
      }
    }
  },

  props: ['screenList', 'screenData',],
}
</script>